import React from 'react';
import { Drawer, Switch, Checkbox } from 'antd';
import './Drawer.less'

const CheckboxGroup = Checkbox.Group;

const DrawerContent = (props) => (
    <Drawer
      title="Template"
      placement="right"
      closable={true}
      onClose={props.drawerOnClose}
      visible={props.drawerVisible}>
      <div className="drawer-container">
        <div className="categgory">
          <div className="drawer-title">
            <div className="name">Category</div>
            <Switch
              defaultChecked
              onChange={props.categorySwitchOnChange} />
          </div>
          <div className="drawer-content">
            <Checkbox
              indeterminate={props.indeterminate}
              onChange={props.onCheckAllChange}
              checked={props.checkAll}>
              Check all
            </Checkbox>
            <CheckboxGroup
              value={props.checkedList}
              onChange={props.categoryOnChange}>
              {
                props.plainOptions.map((item, index) => {
                  return (
                    <Checkbox value={item.name} key={index}>{item.name}</Checkbox>
                  )
                })
              }
              <Checkbox value="A">A</Checkbox>
            </CheckboxGroup>
          </div>
        </div>
        <div className="article">
          <div className="drawer-title">
            <div className="name">Article</div>
            <Switch
              defaultChecked
              onChange={props.articleSwitchOnChange} />
          </div>
          <div className="drawer-content">
            <CheckboxGroup
              options={props.articlePlainOptions}
              value={props.articleCheckedList}
              onChange={props.articleOnChange} />
          </div>
        </div>
        <div className="mission">
          <div className="drawer-title">
            <div className="name">Mission</div>
            <Switch
              defaultChecked
              onChange={props.missionSwitchOnChange} />
          </div>
          <div className="drawer-content">
            <CheckboxGroup
              options={props.missionPlainOptions}
              value={props.missionCheckedList}
              onChange={props.missionOnChange} />
          </div>
        </div>
        <div className="others">
          <div className="drawer-title">
            <div className="name">Others</div>
            <Switch
              defaultChecked
              onChange={props.othersSwitchOnChange} />
          </div>
          <div className="drawer-content">
            <CheckboxGroup
              options={props.othersPlainOptions}
              value={props.othersCheckedList}
              onChange={props.othersOnChange} />
          </div>
        </div>
      </div>
    </Drawer>
)

export default DrawerContent;
